<!-- 广告页面 -->
<template>
  <div class="Index" v-show="isShow">
    <img src="@/assets/fengmian.jpg" alt=""/>
    <div class="time" @click="close">广告 : {{ count }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 3,  //计数
      isShow: true, //显示和隐藏
    };
  },
  mounted() {
    this.timer();
  },
  methods: {
    // 手动关闭页面
    close() {
      this.isShow = false;
      this.$router.push({ path: "/home" });
    },
    // 定时器自动关闭页面
    timer() {
      let time = setInterval(() => {
        if (this.count > 1) {
          this.count--;
        } else {
          if (this.isShow) {
            this.$router.push({ path: "/home" });
          }
          clearInterval(time);
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  img {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 11;
    left: 0px;
  }
  .time {
    width: 100px;
    height: 30px;
    background: black;
    opacity: 0.3;
    color: white;
    border-radius: 30px;
    line-height: 30px;
    position: fixed;
    z-index: 12;
    top: 90px;
    right: 15px;
    text-align: center;
  }
}
</style>
